/**
 * Created by xiniu on 2017/8/30.
 */

import React, { Component, PropTypes } from 'react';
import {
    Image,
    StyleSheet,
    Text,
    View,
    Modal,
    ScrollView,
    TouchableOpacity,
    NativeModules,
    Dimensions,
    Platform,
} from 'react-native';

import AppService from '../service/AppService';
import RString from '../language/RString';

import Toast from 'react-native-simple-toast';
import SuggestContent from './components/SuggestContent';
import CommentList from './components/CommentList';

export default class suggestDetail extends Component {
    // 初始化
  constructor(props) {
    super(props);
    this.state = {
      title: RString('suggestDetail'),
      suggestId: this.props.id,
      completeImgList: [],
      profitImgList: [],
      suggest: {},
      isProject: false,
      modalShow: false,
      filePath: null,
    };
  }
  judgeProject(suggest) {
    this.setState({
      isProject: suggest.isProject,
      suggest,
    });
  }
  componentWillMount() {
    const _this = this;
    const vm = {
      businessType: 'PROJECT',
      businessId: this.state.suggestId,
    };
        // 获取该提案的完成情况图片
    AppService.getUploadImage(vm).then((data) => {
      if (!!data.errors === true && !!data.errors.length > 0) {
        Toast.show(data.errors[0].message);
      } else {
        _this.setState({
          completeImgList: data.attachmentList,
        });
      }
    });
    const profitVm = {
      businessType: 'PROFIT',
      businessId: this.state.suggestId,
    };
        // 获取该提案的项目收益图片
    AppService.getUploadImage(profitVm).then((data) => {
      if (!!data.errors === true && !!data.errors.length > 0) {
        Toast.show(data.errors[0].message);
      } else {
        _this.setState({
          profitImgList: data.attachmentList,
        });
      }
    });
  }

  goBack = () => {
    const { navigator } = this.props;
    if (navigator) {
      navigator.pop();
    }
  };

  doClose = () => {
    NativeModules.system.navTo('BACK');
  };

  enlargeImg(url) {
    this.setState({
      modalShow: true,
      filePath: url,
    });
  }

  closeModal() {
    this.setState({
      modalShow: false,
    });
  }

    // 渲染图片
  renderImage = (v, i) => (
    <TouchableOpacity onPress={() => this.enlargeImg(v.filePath)} key={i}>
      <Image style={styles.uploadImg} source={{ uri: v.filePath }} />
    </TouchableOpacity>
        );

  render() {
    let detailContent = null;
    if (!this.state.isProject) {
      detailContent =
              (<View style={{ flex: 1 }}>
                <View style={{ flex: 1 }}>
                  <View style={styles.comment}>
                    <Text style={{ color: '#000' }}>{RString('complete')}</Text>
                  </View>
                  <View style={[styles.commentWrap, { flexDirection: 'row' }]}>
                    <View style={styles.imgWrap}>
                      <Image style={styles.themeImg} source={require('./img/completion.png')} />
                    </View>
                    <View style={{ flex: 8 }}>
                      <Text style={styles.detailFont}>{this.state.suggest.dealMethod ? this.state.suggest.dealMethod : RString('no_completion')}</Text>
                      {this.state.completeImgList.length > 0 && <View style={styles.suggestImgWrap}>
                        {this.state.completeImgList.map((v, i) => this.renderImage(v, i))}
                      </View>}
                    </View>
                  </View>
                </View>
              </View>);
    } else {
      detailContent =
          (<View style={{ flex: 1 }}>
            <View style={{ flex: 1 }}>
              <View style={styles.comment}>
                <Text style={{ color: '#000' }}>{RString('project_overview')}</Text>
              </View>
              <View style={[styles.commentWrap, { flexDirection: 'row' }]}>
                <View style={styles.imgWrap}>
                  <Image style={styles.themeImg} source={require('./img/completion.png')} />
                </View>
                <View style={{ flex: 8 }}>
                  <Text style={styles.detailFont}>{this.state.suggest.projectSummary ? this.state.suggest.projectSummary : RString('no_overview')}</Text>
                  {this.state.completeImgList.length > 0 && <View style={styles.suggestImgWrap}>
                    {this.state.completeImgList.map((v, i) => this.renderImage(v, i))}
                  </View>}
                </View>
              </View>
            </View>
            <View style={{ flex: 1 }}>
              <View style={styles.comment}>
                <Text style={{ color: '#000' }}>{RString('project_profit')}</Text>
              </View>
              <View style={[styles.commentWrap, { flexDirection: 'row' }]}>
                <View style={styles.imgWrap}>
                  <Image style={styles.themeImg} source={require('./img/completion.png')} />
                </View>
                <View style={{ flex: 8 }}>
                  <Text style={styles.detailFont}>{this.state.suggest.projectProfit ? this.state.suggest.projectProfit : RString('no_profit')}</Text>
                  {this.state.profitImgList.length > 0 && <View style={styles.suggestImgWrap}>
                    {this.state.profitImgList.map((v, i) => this.renderImage(v, i))}
                  </View>}
                </View>
              </View>
            </View>
          </View>);
    }
    return (
      <View style={{ position: 'relative', flex: 1 }}>
        <Modal
          animationType="slide"
          transparent
          visible={this.state.modalShow}
          onShow={() => {}}
          onRequestClose={() => {}}
        >
          <TouchableOpacity activeOpacity={1} style={styles.modalLayout} onPress={() => { this.closeModal(); }}>
            <Image style={styles.modalView} source={{ uri: `${this.state.filePath}?x-oss-process=image/resize,m_lfit,w_640,h_640` }} resizeMode="contain" />
          </TouchableOpacity>
        </Modal>
        <View style={styles.commonHeader}>
          <TouchableOpacity onPress={this.goBack.bind(this)} style={styles.back}>
            <Image source={require('./img/leftArrow.png')} />
          </TouchableOpacity>
          <TouchableOpacity onPress={this.doClose.bind(this)} style={styles.toIndex}>
            <Image source={require('./img/chahao.png')} />
          </TouchableOpacity>
          <View style={{ justifyContent: 'center' }}>
            <Text style={{ color: '#fff', fontSize: 16 }}>{this.state.title}</Text>
          </View>
        </View>
        <ScrollView style={styles.wrap}>
          <SuggestContent suggestId={this.state.suggestId} judgeProject={this.judgeProject.bind(this)} />
          {detailContent}
          <View style={{ flex: 1 }}>
            <View style={styles.comment}>
              <Text style={{ color: '#000' }}>{RString('comment')}</Text>
            </View>
            <CommentList suggestId={this.state.suggestId} />
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  modalLayout: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    backgroundColor: 'rgba(0,0,0,.8)',
  },
  modalView: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  wrap: {
    backgroundColor: '#fff',
  },
  commonHeader: {
    height: Platform.OS === 'android' ? 50 : 60,
    paddingTop: Platform.OS === 'ios' ? 20 : 0,
    backgroundColor: '#333238',
    flexDirection: 'row',
    justifyContent: 'center',
    position: 'relative',
  },
  back: {
    width: 30,
    position: 'absolute',
    left: 20,
    top: 0,
    height: Platform.OS === 'android' ? 50 : 60,
    paddingTop: Platform.OS === 'ios' ? 20 : 0,
    justifyContent: 'center',
  },
  toIndex: {
    width: 30,
    position: 'absolute',
    left: 70,
    top: 0,
    height: Platform.OS === 'android' ? 50 : 60,
    paddingTop: Platform.OS === 'ios' ? 20 : 0,
    justifyContent: 'center',
  },
  detailWrap: {
    flex: 1,
    paddingLeft: 10,
    paddingRight: 10,
  },
  detail: {
    paddingLeft: 10,
    flexDirection: 'row',
  },
  detailTop: {
    paddingLeft: 10,
    paddingRight: 6,
    borderBottomWidth: 1,
    borderStyle: 'solid',
    borderBottomColor: '#eee',
    flexDirection: 'row',
  },
  imgWrap: {
    flex: 1,
    justifyContent: 'center',
  },
  themeImg: {
    width: 14,
    height: 14,
    marginLeft: 6,
  },
  wordWrap: {
    flex: 8,
    borderBottomWidth: 1,
    borderStyle: 'solid',
    borderBottomColor: '#eee',
    paddingTop: 15,
    paddingBottom: 15,
    flexDirection: 'row',
  },
  lastWordWrap: {
    flex: 8,
    paddingTop: 15,
    paddingBottom: 15,
    flexDirection: 'row',
  },
  detailFont: {
    fontSize: 16,
    color: '#000',
  },
  detailFontBold: {
    fontWeight: 'bold',
    fontSize: 16,
    color: '#000',
  },
  detailTime: {
    fontSize: 14,
    color: '#999',
  },
  comment: {
    flex: 1,
    height: 25,
    paddingLeft: 20,
    paddingRight: 20,
    backgroundColor: '#ECECF1',
    justifyContent: 'center',
  },
  commentWrap: {
    flex: 1,
    padding: 20,
  },
  commentDetail: {
    flexDirection: 'row',
    marginBottom: 30,
  },
  commentAvatar: {
    width: 40,
    height: 40,
    marginRight: 15,
  },
  commentImage: {
    width: 80,
    height: 80,
    marginRight: 10,
    marginBottom: 10,
  },
  suggestImgWrap: {
    flex: 1,
    marginTop: 20,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  uploadImg: {
    width: 80,
    height: 80,
    marginRight: 10,
    marginBottom: 10,
  },
});
